<!--
 * @Author: your name
 * @Date: 2019-12-17 10:15:03
 * @LastEditTime: 2019-12-17 12:30:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \blessingvue\src\components\Refresh.vue
 -->
<template>
  <div class="refresh"  v-drag>
    <div class="img" ref="refresh" @click.stop="Refresh" ></div>
  </div>
</template>
<script>
export default {
  name: "drag",
  data() {
    return {
      timer:null,
    }
  },
  methods: {
    Refresh(){
      this.$emit("back")
    }
  },
  beforeDestroy(){
    clearTimeout(this.timer);
    this.timer = null;
  },
  // 自定义指令使用加v-
  directives: {
    drag: function(el, binding, vnode) {
      el.ontouchstart = function(e) {
        //div初始位置
        let startL = el.offsetLeft;
        let startT = el.offsetTop;
        //初始宽高
        let startW = el.offsetWidth;
        let startH = el.offsetHeight;
        //鼠标或手指初始位置
        let startX = e.pageX || e.touches[0].pageX;
        let startY = e.pageY || e.touches[0].pageY;
        //鼠标或者手指到div边界的距离固定
        let posX = startX - startL;
        let posY = startY - startT;
        document.ontouchmove = function(ele) {
          //鼠标、手指移动位置
          let moveX = ele.pageX || ele.touches[0].pageX;
          let moveY = ele.pageY || ele.touches[0].pageY;
          //div位置
          let pX=moveX - posX ;
          let pY=moveY - posY ;
          //限定边界
          //最宽'最高
          let maxW=document.documentElement.clientWidth || document.body.clientWidth;
          let maxH=document.documentElement.clientHeight || document.body.clientHeight;
          pX=pX<0?0:pX;
          pX=pX>maxW-startW?maxW-startW:pX;
          pY=pY<0?0:pY;
          pY=pY>maxH-startH?maxH-startH:pY;
          el.style.left = pX+ "px";
          el.style.top =pY + "px";
        };
        document.ontouchend = function() {
          document.onmousemove = null;
        };
      };
    }
  }
};
</script>
<style lang="less" scoped>
.refresh{
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 0 10px 4px rgba(255, 0, 0, .3);
  background-color: rgba(255,255,255,.5);
  position: fixed;
  top:150px;
  right: 50px;
  z-index: 10;
  .img{
    width: 100%;
    height: 100%;
  }
  .active{
    animation: roll linear 1s infinite; 
  }
}
@keyframes roll {
  form{
    transform: rotate(0)
  }
  to{
    transform: rotate(720deg)
  }
}
</style>